package com.example.app.components


import androidx.compose.foundation.background
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import androidx.navigation.NavType
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import androidx.navigation.navArgument
import com.example.app.components.Modifier

@Composable
fun navSample() {
    // graph导航视图
//    NavHost(navController = , graph = )
    // startDestination起始页
    // builder 所有的想要导航的页面
    // NavController为Navigation组件核心API,可以通过rememberNavController创建
    val navController = rememberNavController()
    NavHost(
        navController = navController,
        startDestination = Route.First.route
    ) {
        // 上方的startDestination和composable的route相等是为了设置起始页, 起始页的路由名称为First
        composable(route = Route.First.route) {
            screen1() {
                navController.navigate("${Route.Second.route}/yxy/25")
            }
        }
        // {name}为路径携带参数
        // arguments指定参数类型
        composable(
            route = "${Route.Second.route}/{name}/{age}",
            arguments = listOf(
                navArgument("age") {
                    // 类型
                    type = NavType.StringType
                    // 是否可空
                    nullable = true
                    // 默认值
                    defaultValue = "18"
                }
            )
        ) {
            // 取出参数(有可能是空,所以需要?.) int类型不能为空 否则会报错
            val name = it.arguments?.getString("name")
            val age = it.arguments?.getString("age")
            screen2(name, age, navController = navController)
        }
        composable(route = "Third?mes={mes}") {
            val mes = it.arguments?.getString("mes")
            screen3(mes) {
                navController.popBackStack("First", false)
            }
        }
    }
    Text(text = "第一1111页")
}

@Composable
// 跳转需传入参数navController,使用此参数进行跳转
fun screen1(goPage1 : () -> Unit) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight()
            .background(Color.Blue),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = "页面1", color = Color.White)
        Spacer(modifier = Modifier.height(50.dp))
        Button(onClick = {
            goPage1()
//            navController.navigate("Second")
        }) {
            Text(text = "跳转至第二页")
        }
    }
}

@Composable
fun screen2(name: String?, age: String?, navController : NavController) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight()
            .background(Color.Red),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = "页面2", color = Color.White)
        Text(text = "姓名 ${name} 年龄 ${age}")
        Spacer(modifier = Modifier.height(50.dp))
        Button(onClick = {
            navController.navigate("Third?mes=你好吗") {
                // 只跳转一次,大量相同的页面跳转可能会连续点击多次返回,可以使用这个属性,只会出现一个页面
                launchSingleTop = true
            }
        }) {
            Text(text = "跳转至第三页")
        }
    }
}

@Composable
fun screen3(mes: String?, navController : () -> Unit) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight()
            .background(Color.Yellow),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = "页面3", color = Color.Black)
        Text(text = "信息: ${mes}")
        Spacer(modifier = Modifier.height(50.dp))
        Button(onClick = {
            navController()
//            navController.navigate("First")
            // popBackStack将当前页面出栈
            // inclusive为true会返回First的前一页,为false会返回First页
//            navController.popBackStack("First", false)
        }) {
            Text(text = "跳转至第一页")
        }
    }
}

@Preview
@Composable
fun navSamplePreview() {
    navSample()
}

